import React, { Component } from 'react'
import { Row, Table, Col, Container, Image } from 'react-bootstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import intl from 'react-intl-universal'
import { httpDelete } from '../../../services/http'

class OrderItem extends Component {

  handleGoodsDetail = (e) => {
    this.props.history.push(e)
  }
  handleDeleteOrder = async (oid) => {
    const [res, err] = await httpDelete(
      { url: '/order/deleteOrder', params: { oid } })
    if (res) {
      console.log('删除成功', res)
      await this.props.onGetOrder()
    } else {
      console.log('删除失败', err)
    }
  }

  render () {
    const { item } = this.props
    console.log(item)
    return (
      <Row>
        <Col>
          <Table bordered size = {'sm'}>
            <tbody>
            <tr style = {{ backgroundColor: '#ececec' }}>
              <td colSpan = {3}>
                <span>{new Date(item.date).toLocaleDateString()}</span>
                <span>订单号:{item._id}</span>
              </td>
              <td className = {'text-center'}>
                <FontAwesomeIcon
                  onClick = {() => {this.handleDeleteOrder(item._id)}}
                  icon = {'trash'} />
              </td>
            </tr>
            </tbody>
            <tbody>
            {
              item.orderGoods.map((goods, i) => {
                const zh = {
                  [goods.enTitle]: goods.zhTitle,
                  [goods.enPrice]: goods.zhPrice,
                  [item.enTotal]: item.zhTotal
                }
                const en = {
                  [goods.enTitle]: goods.enTitle,
                  [goods.enPrice]: goods.enPrice,
                  [item.enTotal]: item.enTotal
                }
                intl.load({
                  'zh-CN': zh,
                  'en-US': en
                })
                return (<tr key = {goods._id}>
                  <td className = {'col-6 clearfix'}>
                    <div className = {'float-left'}>
                      <a
                        className = {'d-block'}
                        onClick = {() => {
                          this.handleGoodsDetail(`/goodsDetail/${goods.detail}`)
                        }}
                        href = {`/goodsDetail/${goods.detail}`}>
                        <Image src = {goods.img} width = {'100px'} />
                      </a>
                    </div>
                    <div className = {'float-left'}>
                      <a
                        onClick = {() => {
                          this.handleGoodsDetail(`/goodsDetail/${goods.detail}`)
                        }}
                        className = {'text-decoration-none'}
                        href = {`/goodsDetail/${goods.detail}`}>
                        {intl.get(goods.enTitle)}</a>
                    </div>
                  </td>
                  <td className = {'col-2  text-center'}>
                    <p>{intl.get('$') + intl.get(goods.enPrice)}</p>
                  </td>
                  <td className = {'col-2 text-center'}>
                    <p>{goods.goods_num}</p>
                  </td>
                  <td className = {'col-2 text-center border-top-0'}>
                    {!i && <p>{intl.get('$') + intl.get(item.enTotal)}</p>}
                  </td>
                </tr>)
              })
            }
            </tbody>
          </Table>
        </Col>
      </Row>

    )
  }
}

export default OrderItem
